<template>
  <div class="filter-panel">
    <div class="filter-header">
      <span class="filter-title">筛选条件</span>
      <el-button link type="primary" @click="handleReset">
        <el-icon><RefreshRight /></el-icon>
        重置
      </el-button>
    </div>

    <el-divider />

    <!-- 城市筛选 -->
    <div class="filter-section">
      <div class="section-title">📍 城市</div>
      <el-select
        v-model="localFilters.cities"
        multiple
        collapse-tags
        placeholder="请选择城市"
        style="width: 100%"
        @change="handleFilterChange"
      >
        <el-option
          v-for="city in cityOptions"
          :key="city"
          :label="city"
          :value="city"
        />
      </el-select>
    </div>

    <!-- 薪资范围 -->
    <div class="filter-section">
      <div class="section-title">💰 薪资范围</div>
      <el-slider
        v-model="localFilters.salary_range"
        range
        :min="0"
        :max="100"
        :format-tooltip="formatTooltip"
        @change="handleFilterChange"
      />
      <div class="range-label">
        {{ localFilters.salary_range[0] }}k - {{ localFilters.salary_range[1] }}k
      </div>
    </div>

    <!-- 工作经验 -->
    <div class="filter-section">
      <div class="section-title">💼 工作经验</div>
      <el-checkbox-group v-model="localFilters.work_years" @change="handleFilterChange">
        <el-checkbox v-for="item in WORK_YEAR_OPTIONS" :key="item" :label="item">
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 学历要求 -->
    <div class="filter-section">
      <div class="section-title">🎓 学历要求</div>
      <el-radio-group v-model="localFilters.education_single" @change="handleEducationChange">
        <el-radio label="">不限</el-radio>
        <el-radio v-for="item in EDUCATION_OPTIONS.slice(1)" :key="item" :label="item">
          {{ item }}
        </el-radio>
      </el-radio-group>
    </div>

    <el-divider />

    <el-button type="primary" style="width: 100%" @click="handleApply">
      应用筛选
    </el-button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { RefreshRight } from '@element-plus/icons-vue'
import { useFilterStore } from '@/stores/filter'
import { WORK_YEAR_OPTIONS, EDUCATION_OPTIONS } from '@/utils/constants'

const filterStore = useFilterStore()

// 本地筛选条件
const localFilters = ref({
  cities: [],
  salary_range: [0, 100],
  work_years: [],
  education_single: ''
})

// 城市选项（示例，实际应从API获取）
const cityOptions = ref(['北京', '上海', '深圳', '杭州', '广州', '成都', '南京', '武汉'])

// 格式化tooltip
const formatTooltip = (value) => `${value}k`

// 处理学历单选变化
const handleEducationChange = (value) => {
  localFilters.value.educations = value ? [value] : []
  handleFilterChange()
}

// 处理筛选条件变化
const handleFilterChange = () => {
  // 实时更新store（可选）
}

// 应用筛选
const handleApply = () => {
  filterStore.setFilters({
    cities: localFilters.value.cities,
    salary_range: localFilters.value.salary_range,
    work_years: localFilters.value.work_years,
    educations: localFilters.value.educations || []
  })
}

// 重置筛选
const handleReset = () => {
  localFilters.value = {
    cities: [],
    salary_range: [0, 100],
    work_years: [],
    education_single: ''
  }
  filterStore.resetFilters()
}
</script>

<style scoped>
.filter-panel {
  height: 100%;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-title {
  font-size: 16px;
  font-weight: 600;
}

.filter-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text-color);
}

.range-label {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
}

:deep(.el-checkbox) {
  display: block;
  margin-right: 0;
  margin-bottom: 8px;
}

:deep(.el-radio) {
  display: block;
  margin-right: 0;
  margin-bottom: 8px;
}
</style>

